<script setup lang="ts">
import { getStatisticsAPI, getChartDataAPI } from '@/api/statistics'
import qiunDataCharts from '../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import {
    getDiffDay,
    getAroundTodayRangeTime,
    getAroundCurrentWeekRangeTime,
    getAroundLastWeekRangeTime,
    getAroundCurrentMonthRangeTime,
    getAroundCurrentYearRangeTime
} from '@/utils/date'

const getStatistics = async () => {
    const { data } = await getStatisticsAPI({
        rangeTime: timeList[tabsIndex.value].value
    })

    chartTabs.value = chartTabs.value.map((item, index) => {
        return {
            ...item,
            count: data[item.value]
        }
    })

    topTabsList.value = topTabsList.value.map((item, index) => {
        return {
            ...item,
            count: data[item.value]
        }
    })
}

const getChartData = async (type: any) => {
    console.log(timeList[tabsIndex.value].value)
    const { data } = await getChartDataAPI({
        type: type,
        rangeTime: timeList[tabsIndex.value].value,
        groupVal: tabsIndex.value === 4 ? '%Y' : ''
    })

    const chartData1 = {
        categories: [],
        series: [
            {
                name: '数据',
                data: []
            }
        ]
    }
    chartData1.categories = data.map((item: any, index: number) => {
        return item.label.substring(5)
    })
    chartData1.series[0].data = data.map((item: any, index: number) => {
        return item.value
    })
    chartData.value = JSON.parse(JSON.stringify(chartData1))
}

onLoad(async () => {
    await getStatistics()
    await getChartData(1)
})

const timeList = [
    {
        label: '今日',
        value: getAroundTodayRangeTime()
    },
    {
        label: '本周',
        value: getAroundCurrentWeekRangeTime()
    },
    {
        label: '上周',
        value: getAroundLastWeekRangeTime()
    },
    {
        label: '本月',
        value: getAroundCurrentMonthRangeTime()
    },
    {
        label: '本年',
        value: getAroundCurrentYearRangeTime()
    }
]

const topTabsList = ref([
    {
        label: '产品总数',
        value: 'prodTotalCount',
        count: 0,
        quantifier: '个'
    },
    {
        label: '用户总数',
        value: 'userTotalCount',
        count: 0,
        quantifier: '个'
    },
    {
        label: '工厂总数',
        value: 'shopTotalCount',
        count: 0,
        quantifier: '家'
    }
])

const chartTabs = ref([
    {
        label: '产品浏览量',
        value: 'prodViewCount',
        count: 0,
        quantifier: '次'
    },
    {
        label: '用户咨询量',
        value: 'userConsultCount',
        count: 0,
        quantifier: '次'
    },
    {
        label: '新增用户',
        value: 'userCount',
        count: 0,
        quantifier: '个'
    },
    {
        label: '新增工厂',
        value: 'shopCount',
        count: 0,
        quantifier: '家'
    }
])

const tabsIndex = ref(0)

const changeTabs = (index: number) => {
    tabsIndex.value = index
    getChartData(girdTabsIndex.value + 1)
    getStatistics()
}

const girdTabsIndex = ref(0)
const changeGirdTabsIndex = async (index: number) => {
    girdTabsIndex.value = index
    await getChartData(index + 1)
}

const opts = {
    color: [
        '#1890FF',
        '#91CB74',
        '#FAC858',
        '#EE6666',
        '#73C0DE',
        '#3CA272',
        '#FC8452',
        '#9A60B4',
        '#ea7ccc'
    ],
    padding: [15, 10, 0, 15],
    animation: false,
    dataLabel: false,
    // scrollPosition: 'current',
    touchMoveLimit: 60,
    legend: {},
    enableScroll: true,
    xAxis: {
        disableGrid: true,
        itemCount: 5,
        scrollShow: true
    },
    fontSize: 10,
    yAxis: {
        gridType: 'dash',
        dashLength: 2
    },
    extra: {
        line: {
            type: 'curve',
            width: 2,
            activeType: 'hollow',
            onShadow: true
        }
    }
}

const goback = () => {
    uni.navigateBack()
}

const chartData = ref({})
</script>

<template>
    <view
        class="top-box"
        :style="{
            backgroundImage: `url(${$getImg('/img/statistics/bg.png')})`,
            paddingTop: `${$getMenuButtonTop()}px`
        }"
    >
        <view class="u-flex">
            <fui-icon name="arrowleft" @click="goback"></fui-icon>
            <view class="top-title">数据中心</view>
        </view>

        <view class="top-box-items">
            <view v-for="(item, index) in topTabsList" :key="index" class="top-box-item">
                <view class="top-box-item-title">{{ item.label }}</view>
                <view class="top-box-item-count"
                    >{{ item.count }}
                    <text style="font-weight: 400; color: #999999">{{
                        item.quantifier
                    }}</text></view
                >
            </view>
        </view>
        <view class="tabs-box u-flex">
            <view
                class="tabs-item"
                v-for="(item, index) in timeList"
                :class="tabsIndex == index ? 'tabs-item-choose' : ''"
                :key="index"
                @click="changeTabs(index)"
                >{{ item.label }}</view
            >
        </view>
    </view>

    <view class="transparent"></view>

    <view class="gird-box">
        <view
            class="gird-item"
            v-for="(item, index) in chartTabs"
            :key="index"
            :class="girdTabsIndex === index ? 'gird-item-choose' : ''"
            @click="changeGirdTabsIndex(index)"
        >
            <view class="grid-title">{{ item.label }}</view>
            <view class="grid-num"
                >{{ item.count }} <text class="gird-quantifier">{{ item.quantifier }}</text></view
            >
        </view>
    </view>

    <view class="chart-box">
        <view class="chart-title"
            >{{ chartTabs[girdTabsIndex].label }}（{{ timeList[tabsIndex].label }}）</view
        >
        <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
    </view>
</template>

<style scoped lang="scss">
.top-box-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin: 0 28rpx;
    .top-box-item {
        padding: 24rpx 0;
        background: #ffffff;
        border: 1px solid #eaecf3;
        border-radius: 8px;
    }
    .top-box-item-title {
        text-align: center;
        white-space: nowrap;
        font-size: 26rpx;
        color: #666666;
    }
    .top-box-item-count {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        margin-top: 24rpx;
    }
}

.top-box {
    position: sticky;
    width: 100%;
    height: 500rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    .top-title {
        font-weight: 600;
        font-size: 36rpx;
        color: #1a1a1a;
        width: 100%;
        text-align: center;
    }

    .tabs-box {
        background-color: #ffffff;
        margin: 0 30rpx;
        border-radius: 221px;
        height: 68rpx;

        .tabs-item {
            flex: 1;
            text-align: center;
            color: #666666;
            font-size: 28rpx;
        }
        .tabs-item-choose {
            //margin: 4rpx 0;
            padding: 16rpx 0;
            background-color: #376af7;
            width: 100%;
            border-radius: 233px;
            color: #ffffff;
            font-weight: 600;
        }
    }
}

//.transparent {
//    width: 100%;
//    height: 348rpx;
//}

.gird-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30rpx;
    padding: 0 30rpx;
    .gird-item {
        background-color: #ffffff;
        padding: 20rpx 0;
        border: 2rpx solid #eaecf3;
        border-radius: 8px;
        text-align: center;
        .grid-title {
            //font-size: 26rpx;
            color: #666666;
            white-space: nowrap;
        }
        .grid-num {
            font-weight: 600;
            font-size: 36rpx;
            color: #333333;
            margin-top: 10rpx;
            white-space: nowrap;
        }
        .gird-quantifier {
            font-size: 26rpx;
            color: #999999;
        }
    }
    .gird-item-choose {
        background: linear-gradient(121deg, #376af7 14%, #40a9ff 83%);
        .grid-title {
            color: #ffffff;
        }
        .grid-num {
            color: #ffffff;
        }
        .gird-quantifier {
            color: #ffffff;
        }
    }
}

.chart-box {
    margin-top: 60rpx;
    .chart-title {
        padding: 10rpx 30rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
    }
}
</style>
